<script>
import HeaderNav from '@/components/HeaderNav.vue'
import TaskContainer from '@/components/TaskContainer.vue'
import EnterpriseTaskItem from '@/components/EnterpriseTaskItem.vue'
import Condition from '@/components/Condition.vue'
import TaskPreviewView from '@/views/task/TaskPreviewView.vue'
import Footor from '@/components/Footor.vue'
import PersonApplyView from '@/components/PersonApplyView.vue'
import TaskCodeListView from './task/TaskCodeListView.vue'
import API from '@/api/index.js'

export default {
  components: {
    HeaderNav,
    EnterpriseTaskItem,
    TaskContainer,
    Condition,
    TaskPreviewView,
    Footor,
    PersonApplyView,
    TaskCodeListView,
  },
  data() {
    return {
      
      conditionList: [
        {
          name: "编程语言",
          value: 'langName',  // 查询条件对应的键
          list: [
            // {
            //   id: 1,
            //   name: "Java基础",
            //   child: {
            //     name: "任务模块",
            //     value: 'module',
            //     list: [
            //       { id: 1, name: "基础" },
            //       { id: 2, name: "流程控制" },
            //       { id: 3, name: "列表/数组" },
            //       { id: 4, name: "字典" },
            //       { id: 5, name: "集合" },
            //     ]
            //   }
            // },
          ],
          multi: true, // 支持多选
        },
        {
          name: "难易程度",
          value: 'leave',  // 查询条件对应的键
          list: [
            { id: "简单题", name: "简单题" },
            { id: "中等题", name: "中等题" },
            { id: "难题", name: "难题" },
            { id: "选做题", name: "选做题" },
          ],
          multi: true, // 支持多选
        }
      ],
      showPreviewDialog: false, // 控制预览对话框的显示
      showDialog: false,
      showDialog2: false,
      currentTask: null, // 当前任务信息
      taskList: [],  // 存储任务列表
      currentPreviewTask: null, //存储当前任务
      taskId: null,  //存储当前任务id

      condition: {}, // 查询关键字条件
      searchResults: [], // 存储搜索结果
			isSearching: false, //是否处于 搜索状态
      pageTotal: null,
      pagination: {
        page: 1,
        rows: 8,
      },
    }
  },
  created(){
		this.queryTasklist()
    this.handleLanagesAndModules()
	},

  methods: {
    queryTasklist(){
      if(this.isSearching)
        return;
      const params = {
        ...this.condition,
        page: this.pagination.page,
				rows: this.pagination.rows
      }
			API.getTeacherList(params)
			.then(ret=>{
				this.taskList = ret.data;
        this.pageTotal = ret.total;
			})
		},
    getLeaveType(completedText) {
			const mapping = {
				'简单题': 1,
				'中等题': 2,
				'难题': 3,
				'选做题': 4
			};
			return mapping[completedText] || 1;
		},
    handleLanagesAndModules(){
      // 获取语言和模块数据
      API.get_condition_list()
      .then(res=>{
        this.conditionList[0].list = res.data;
        console.log("获取语言和模块数据", this.conditionList.list);
      })
    },
    previewTask(task) {
      // 这里可以根据 taskId 获取任务的详细信息
      this.currentPreviewTask = task;
      this.showPreviewDialog = true;
    },
    assignTask(taskId) {
      // 根据任务id分配
      this.taskId = taskId;
      this.showDialog = true;
    },
    checkTask(taskId, task) {
      this.taskId = taskId;
      this.currentPreviewTask = task;
      this.showDialog2 = true ;
    },
    handlePersonSave() { 
      // 调用子组件的保存任务的方法
      this.$refs.personApplyView.handleSave();
      this.showDialog = false;
    },
    handlePersonClose() {
      // 调用子组件的刷新页面方法
      this.$refs.personApplyView.reset();
      this.showDialog = false;
    },
    handleConditionChange() {
      // 条件变化时自动触发任务查询
      this.pagination.page = 1; // 重置页码
      this.queryTasklist(this.condition);
    },
    // 监听页码改变
		handlePageChange(page){
			this.pagination.page = page;
			this.queryTasklist(this.condition);
		},
    handleResults(results) {
			this.searchResults = results;
			this.isSearching = true; //标记 为搜索状态
			this.pagination.page = 1;
			this.pageTotal = results.length;
		},
    clearSearchResults(){
			this.isSearching = false; // 取消搜索状态
    		this.searchResults = [];  // 清空搜索结果
    		this.queryTasklist();     // 重新加载列表
		},
  },
  watch: {
    'condition.search'(newVal) {
			if (!newVal) {
				this.clearSearchResults(); // 搜索词清空时，恢复原始列表
			}
		}
  }
}
</script>

<template>
  <main class="enterprise-view">
    <!-- 系统导航 -->
    <HeaderNav active-index="0" class="nav-glass"></HeaderNav>
    <div class="glass-background"></div>

    <div class="content-wrapper">
      <!-- 搜索条件 -->
      <Condition 
      :conditionList="conditionList" 
      v-model="condition" 
      class="condition-glass" 
      @change="handleConditionChange"
      @update-teachaerResults = "handleResults"
			@clear-teachaerSearch="clearSearchResults"
      />
      <!-- 任务列表 -->
      <div class="task-container-glass">
        <div class="task-items">
          <EnterpriseTaskItem v-for="(task, index) in isSearching ? searchResults : taskList" 
          :key="index" 
          :id="task.id" 
          :lang="task.l_name"
          :leave="getLeaveType(task.completed)" 
          :title="task.title" 
          :module-name="task.m_name" 
          @preview-click="previewTask(task)"
          @assign-click="assignTask" 
          @check-click="checkTask(task.id, task)">
          </EnterpriseTaskItem>
        </div>
        <!-- 添加分页插件 -->
        <div class="pagination-wrapper">
          <el-pagination background layout="prev, pager, next" hide-on-single-page 
          :page-size="pagination.rows"
          :pager-count="5" 
          v-model:current-page="pagination.page" 
          :total="this.pageTotal"
          @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </main>

  <!-- 预览对话框 -->
  <el-dialog v-model="showPreviewDialog" title="任务预览" width="70%" >
    <TaskPreviewView :task="currentPreviewTask"/>
  </el-dialog>

  <el-dialog v-model="showDialog" title="分配人员" width="650" top="10vh">
    <PersonApplyView ref="personApplyView" :id="taskId"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handlePersonSave">保存</el-button>
        <el-button @click="handlePersonClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="showDialog2" title="任务检查" width="70%" top="10vh">
    <TaskCodeListView :taskId="taskId" :taskItem="currentPreviewTask"/>
  </el-dialog>

  <!-- 添加底部备案信息 -->
  <Footor></Footor>
</template>

<style scoped>
.enterprise-view {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #151824 0%, #1c1f35 100%);
}

.content-wrapper {
  margin: 0 auto;
  padding: 20px 50px;
  position: relative;
  z-index: 1;
}

.glass-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 1px),
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.03) 0%, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  opacity: 0.5;
  z-index: 0;
}

.nav-glass,
.condition-glass,
.task-container-glass {
  backdrop-filter: blur(12px);
  background: rgba(21, 24, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.task-container-glass {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px;
}

.task-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.task-items>.task-item {
  flex: 0 1 calc(25% - 20px);
  /* 每行展示4个任务 */
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
}

.task-items>*:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 按钮样式调整 */
:deep(.condition-glass .el-button) {
  background: none;
  /* 去掉背景色 */
  border: none;
  /* 去掉边框 */
  color: rgba(255, 255, 255, 0.9);
  /* 设置字体颜色 */
}

:deep(.condition-glass .el-button:hover) {
  background: none;
  /* 去掉 hover 背景色 */
  color: #ffffff;
  /* 设置 hover 字体颜色 */
}

:deep(.condition-glass .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

:deep(.condition-glass .el-input__inner) {
  color: #e6e8f0;
}

:deep(.condition-glass .el-input__inner::placeholder) {
  color: rgba(230, 232, 240, 0.5);
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 添加分页样式 */
:deep(.el-pagination) {
  color: white;
  /* 设置页码字体颜色为白色 */
}

:deep(.el-pagination.is-background button),
:deep(.el-pagination.is-background .el-pager li) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e6e8f0;
  /* 设置按钮和页码的字体颜色 */
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: rgba(74, 128, 255, 0.2);
  border-color: rgba(74, 128, 255, 0.3);
  color: #7a9dff;
  /* 设置当前页码的字体颜色 */
}

:deep(.el-pagination.is-background button:hover),
:deep(.el-pagination.is-background .el-pager li:hover) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
  
}

:deep(.el-dialog) {
  left: 0 !important;
  right: auto !important;
  margin: 0 !important;
}
@media (max-width: 800px) {
  :deep(.el-dialog) {
    width: 98vw !important;
    max-width: 99vw !important;
    left: 0 !important;
    right: auto !important;
    margin: 40px 10px !important;
  }
}

@media (max-width: 1200px) {
  .content-wrapper {
    padding: 16px 10px;
  }
  .task-items>.task-item {
    flex: 0 1 calc(50% - 10px);
  }
}
@media (max-width: 800px) {
  .content-wrapper {
    padding: 8px 2px;
  }
  .task-container-glass {
    flex-direction: column;
    padding: 10px 2px;
    gap: 10px;
  }
  .task-items {
    flex-direction: column;
    gap: 10px;
  }
  .task-items>.task-item {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .pagination-wrapper {
    margin-top: 10px;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 800px) {
  .dialog-footer {
    justify-content: center;
    padding-bottom: 12px;
  }
}
</style>

<style>
.el-dialog {
  width: 98vw !important;
  max-width: 99vw !important;
  left: 0 !important;
  right: auto !important;
  margin: 40px 5px !important;
}
@media (min-width: 801px) {
  .el-dialog {
    width: auto !important;
    max-width: 70vw !important;
    margin: 0 auto !important;
  }
}
</style>
